/*
 * Segmented control component
 *
 * Default control: Medium size.
 *
 * Usage:
 *
 *    <div class="it-sgm-control">
 *        <div class="button">
 *            <input type="radio" id="btn-1-id" name="control-name" value="0" checked="">
 *            <label for="btn-1-id"><i class="sprite-it-x24-mono icon-bell"></i><span>Option 1</span></label>
 *        </div>
 *        <div class="button">
 *            <input type="radio" id="btn-2-id" name="control-name" value="2">
 *            <label for="btn-2-id"><span>Option 2</span></label>
 *        </div>
 *    </div>
 */

.it-sgm-control {
    background-color: var(--main-surface-secondary);
    border-radius: var(--radius-i-md);
    display: inline-flex;
    padding: 2px;
}

.it-sgm-control .button {
    cursor: pointer;
    margin: 2px;
    position: relative;
    text-align: center;
}

.it-sgm-control input {
    position: absolute;
    opacity: 0;
}

.it-sgm-control input + label {
    --icon-size: 24px;
    --mask-color: var(--main-neutral-secondary);
    align-items: center;
    border-radius: var(--radius-i-sm);
    color: var(--main-neutral-secondary);
    cursor: pointer;
    display: flex;
    justify-content: center;
    height: 100%;
    padding: 8px;
    position: relative;
    transition: var(--transition-color);
}

.it-sgm-control input + label span {
    flex: 1 1 auto;
    font: var(--text-btn-lg);
    overflow: hidden;
    padding: 0 6px;
    position: relative;
    text-overflow: ellipsis;
}

.it-sgm-control input + label i {
    position: relative;
    transition: var(--transition-color);
}

.it-sgm-control input + label::before {
    background: var(--main-surface-primary);
    border-radius: inherit;
    content: "";
    height: 100%;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    transition: var(--transition-opacity), var(--transition-shadow), var(--transition-width);
    width: 0;
}


/* Types */

/* Types. Full width */

.it-sgm-control.f-w {
    width: 100%;
}

.it-sgm-control.f-w .button {
    flex: 1;
}


/* Sizes */

/* Sizes. Large size */

.it-sgm-control.lg-size input + label {
    padding: 12px;
}

.it-sgm-control.lg-size input + label span {
    padding: 0;
}

.it-sgm-control.lg-size input + label i ~ span {
    margin-inline-start: 12px;
}

.it-sgm-control.lg-size input + label span ~ i {
    margin-inline-start: 12px;
}


/* Sizes. Small size */

.it-sgm-control.sm-size input + label {
    padding: 4px;
}

.it-sgm-control.sm-size input + label span {
    font: var(--text-btn-md);
    padding: 4px 3px;
}


/* States */

/* Active state */

.it-sgm-control input:checked + label {
    --mask-color: var(--main-neutral-primary);
    color: var(--main-neutral-primary);
}

.it-sgm-control input:checked + label::before {
    box-shadow: var(--shadow-sm-narrow);
    opacity: 1;
    transition-delay: .05s;
    width: 100%;
}

/* Active state. Primary color */

.it-sgm-control .button.primary input:checked + label {
    --mask-color: var(--main-forced-white);
    color: var(--main-forced-white);
}

.it-sgm-control .button.primary input + label::before {
    background: var(--main-primary);
}
